<template>
  <div>
    <!-- 表单 -->
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      style="width: 600px"
    >
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="form.title" placeholder="输入名称"></el-input>
      </el-form-item>
      <el-form-item label="商品类型" prop="type_id">
        <template>
        <el-radio v-model="form.type_id" label="101">创意家居</el-radio>
        <el-radio v-model="form.type_id" label="102">生活百货</el-radio>
        <el-radio v-model="form.type_id" label="103">健康美容</el-radio>
        <el-radio v-model="form.type_id" label="104">时尚饰品</el-radio>
        <el-radio v-model="form.type_id" label="105">数码配件</el-radio>
        <el-radio v-model="form.type_id" label="106">食品</el-radio>
        </template>
      </el-form-item>

      <el-form-item label="选择商品照片" prop="index_img">
        <el-upload
          class="avatar-uploader"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.index_img" :src="form.index_img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">立即新增</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import httpApi from "../../http";
export default {
  data() {
    return {
      form: {
        title: "", // 封装商品名字
        index_img: "", // 封装商品头像路径
        
      },
      rules: {
        title: [{ required: true, message: "必填", trigger: "blur" }],
        index_img: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 验证通过
          // 发送新增商品的请求
          httpApi.shoppingApi.queryShoppingAdd(this.form).then((res) => {
            console.log(res)
            if (res.data) {
              // 新增成功
              this.$message({ type: "success", message: "新增成功" });
              this.$refs.form.resetFields();
            } else {
              // 失败
              this.$message({ type: "error", message: "失败，请稍后重试" });
            }
          });
        }
      });
    },

    /** 上传成功后执行 */
    handleAvatarSuccess(res, file) {
      console.log(res);
      // 将上传成功的图片访问路径赋值给form对象的属性
      this.form.index_img = res.data;
      // 想办法将错误消息移除
      this.$refs.form.clearValidate();
    },

    /** 图片上传之前执行 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  height: 178px;
  display: block;
}
</style>
